<!-- 有bug -->
<template>
  <div class="TIME">
    <el-date-picker
      v-model="startTime"
      :type="type?type:'datetime'"
      :value-format="format? format:'yyyy-MM-dd'"
      placeholder="请选择开始日期"
      :picker-options="startDatePicker"
      clearable
      @change="startValTExt"
    />
    <div class="TIME-ICON">~</div>
    <el-date-picker
      v-model="endTime"
      :type="type?type:'datetime'"
      :value-format="format? format:'yyyy-MM-dd'"
      placeholder="请选择结束日期"
      :picker-options="endDatePicker"
      clearable
      @change="endValTExt"
    />
  </div>
</template>

<script>
export default {
  props: {
    start: {
      type: Number,
      default: 0
    },
    end: {
      type: Number,
      default: 0
    },
    format: {
      type: String,
      default: () => 'yyyy-MM-dd'
    },
    type: {
      type: String,
      default: () => 'date'
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate()
    }
  },
  watch: {
    start(val) {
      this.startTime = val
      if (val > 0) {
        this.startValTExt(val)
      }
    },
    end(val) {
      this.endTime = val
      if (val > 0) {
        this.endValTExt(val)
      }
    }
  },
  methods: {
    // 限制前面日期不能低于后面日期
    beginDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.endTime) {
            //  如果结束时间不为空，则小于结束时间
            return new Date(self.endTime).getTime() < time.getTime();
          } else {
            return time.getTime() >= Date.now() + 1 * 24 * 60 * 60 * 1000// 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    processDate() {
      const self = this;
      return {
        disabledDate(time) {
          if (self.startTime) {
            //  如果开始时间不为空，则结束时间大于开始时间
            return new Date(self.startTime).getTime() > time.getTime();
          } else {
            return time.getTime() >= Date.now() - 1 * 24 * 60 * 60 * 1000// 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      };
    },
    startValTExt(val) {
      // console.log(val)
      this.$emit('startVal', val)
    },
    endValTExt(val) {
      // console.log(val)
      this.$emit('endVal', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.TIME {
  width: 100%;
  display: flex;
  align-items: center;
  > .TIME-ICON {
    padding: 0 10px;
  }
}
::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
  min-width: 202px !important;
}
</style>
